import { Meta } from '@storybook/addon-docs';

<Meta title="Concepts/Migration/from v0/Components/Image Migration" />

# Image Migration

## Overview:

Before:

```tsx
import { Image } from '@fluentui/react-northstar';
const Component = () => <Image />;
```

After:

```tsx
import { Image } from '@fluentui/react-components';
const Component = () => <Image />;
```

## How to migrate props:

| Image props                    | migrate guide                                                                                                                                                                           |
| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| as, className                  | keep it as is                                                                                                                                                                           |
| src, alt, aria-label, key, ref | keep it as is                                                                                                                                                                           |
| aria-hidden                    | if `alt` property is empty and image is illustrative or not relevant for screen reader users, it's **required** to add `aria-hidden="true"` attribute (in v0 it was applied bt default) |
| variables, design, styles      | see Migrate style overrides in this document                                                                                                                                            |
| accessibility                  | see [migrate-custom-accessibility.md](?path=/docs/concepts-migration-from-v0-custom-accessibility--page)                                                                                |
| fluid                          | replace with `fit="contain"`                                                                                                                                                            |
| circular                       | replace with `shape="circular"`                                                                                                                                                         |
| avatar                         | see Migrate avatar prop in this document                                                                                                                                                |

---

## Migrate style overrides

⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](?path=/docs/concepts-migration-from-v0-custom-style-overrides--page).

### Example for migrate boolean `variables`:

Before:

```tsx
// in COMPONENT_NAME.tsx
import { Image } from '@fluentui/react-northstar';

export const Component = () => <Image variables={{ isCustomImage: true }} />;

// in image-styles.ts
export const imageStyles1 = {
  root: ({ variables: { isCustomImage } }) => ({
    ...(isCustomImage && {
      opacity: 0.75,
    }),
  }),
};
```

After:

```tsx
// in COMPONENT_NAME.tsx
import { Image } from '@fluentui/react-components';
import { useStyles } from './COMPONENT_NAME.styles.ts';

export const Component = () => {
  const classes = useStyles();
  return <Image className={classes.customImage} />;
};

// in COMPONENT_NAME.styles.ts
import { makeStyles } from '@fluentui/react-components';

export const useStyles = makeStyles({
  customImage: {
    opacity: 0.75,
  },
});
```

## Migrate `avatar` prop

Use `Avatar` component instead of `Image` with prop `avatar` when you need to render avatar.

Before:

```tsx
import { Image } from '@fluentui/react-northstar';
const Component = () => <Image alt="someone's avatar" src="avatar_url" avatar />;
```

After:

```tsx
import { Avatar } from '@fluentui/react-components';
const Component = () => <Avatar image={{ alt: "someone's avatar", src: 'avatar_url' }} />;
```
